<template>
  <div class="pb-64">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 8 }"
      autocomplete="off"
      @finish="$emit('next', formState)"
    >
      <a-form-item label="监测因素" name="checkAll">
        <a-checkbox v-model:checked="formState.checkAll" @change="onCheckAllChange">
          全选
        </a-checkbox>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
        <a-checkbox-group v-model:value="formState.checkedList">
          <a-row>
            <a-col :span="8" v-for="(item, index) in plainOptions" :key="index">
              <a-checkbox :value="item">{{ item }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
        <a-button type="primary" @click="$emit('back')">上一步</a-button>
        <a-button type="primary" html-type="submit" class="ml-8 py-1 px-2">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';

interface FormState {
  checkAll: boolean;
  checkedList: string[];
}
export default defineComponent({
  setup() {
    const formState = reactive<FormState>({
      checkAll: false,
      checkedList: [],
    });
    const plainOptions = [
      '倾斜',
      '沉降',
      '温度',
      '雨量',
      '温湿度',
      '伸缩缝',
      '地下水位',
      '钢筋应力',
      '拉索应力',
      '应力应变',
      '监控视屏',
      '风速风向',
      '水平位移',
      '锚索受力',
      '钢支撑轴力',
      '表面变型',
      '挡土墙压力',
      '裂缝',
      '内部位移',
      '地表下沉',
      '水流量',
      '内部变型',
      '孔隙水压力',
      '水位观测',
      '土体压力',
      '锚杆轴力',
      '围岩渗压',
      '钢拱架应力',
      '围岩压力',
    ];

    const onCheckAllChange = (e: any) => {
      formState.checkedList = e.target.checked ? plainOptions : [];
      // Object.assign(state, {
      //   checkedList: e.target.checked ? plainOptions : [],
      //   indeterminate: false,
      // });
    };

    return {
      formState,
      plainOptions,
      onCheckAllChange,
    };
  },
});
</script>
    
    